<!DOCTYPE html>
<html>
	<head>
		<meta charset = UTF-8 />

	<!-- jqueryファイルの読み込み -->

		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>

		<script type="text/javascript">
			$("document").ready(function(){
			    $('.flexslider').flexslider();
			});
		</script>

	<!-- Target sliders individually with different properties -->
		<script type="text/javascript" charset="utf-8">
		  $(window).load(function() {
		    $('#main-slider').flexslider({
		      animation: 'slide',
		      animationDuration: 1,
		      slideshowSpeed: 1,
		      controlsContainer: '.flex-container'
		    });

		    $('#secondary-slider').flexslider();
		  });
		</script>

	<!-- CSSファイルの読み込み -->

		<link rel = "stylesheet" type = "text/css" href = "css/reset.css" />
		<link rel = "stylesheet" type = "text/css" href = "css/style.css" />
		<link rel = "stylesheet" type = "text/css" href = "css/flexslider.css" />

		<title>ファン</title>
	</head>
	<body>
		<article>

			<!-- header -->

			<header id = "header">

				<h1 id = "logo">
					<a href ="index.php"><img src ="img/logo.gif" width = "227" height = "27" alt = "株式会社フューチャースコープ"></a>
				</h1>

				<p id = "user">ようこそ田中太郎さん！</p>

				<p id = "logout"><a href = "#">ログアウト</a></p>


			</header>


			<!-- nav -->

			<nav>
				<ul class="clear">
					<li><a href = "index.php">ホーム</a></li>
					<li><a href = "profileTop.php">プロフィール</a></li>
					<li><a href = "communityList.php">コミュニティ</a></li>
					<li><a href = "articleList.php">掲示板</a></li>
					<li><a href = "albumList.php">アルバム</a></li>
				</ul>
			</nav>


			<!-- contents -->

			<article id = "contents"  class="clear">


				<div id="main-slider" class="flexslider">
  					<ul class="slides">
					    <li>
					       <img src= "./img/sample01.jpg" height = "250" width = "740" />
					    </li>
					    <li>
					       <img src="./img/img_pr.jpg" height = "250" width = "740" />
					    </li>
					    <li>
					       <img src="./img/img1.jpg"  height = "250" width = "740"/>
					    </li>
				    </ul>
				</div>


				<!-- news -->

				<section id = "notice" class="clear">

					<h2>NEWS</h2>

						<p>ここに新着情報うううううううウうううううううううううううううう</p><br>
						<p>ここに新着情報うううううううウうううううううううううううううう</p><br>
						<p>ここに新着情報うううううううウうううううううううううううううう</p><br>
						<p>ここに新着情報うううううううウうううううううううううううううう</p><br>
						<p>ここに新着情報うううううううウうううううううううううううううう</p><br>
						<p>ここに新着情報うううううううウうううううううううううううううう</p><br>
						<p>ここに新着情報うううううううウうううううううううううううううう</p><br>
						<p>ここに新着情報うううううううウうううううううううううううううう</p><br>

				</section>


				<!-- newArticle -->

				<section id = "newArticle" class="clear">

					<h2>新着スレッド</h2>

						<p>【ああああああああ】ここに新着情報ううううううう</p><br>
						<p>【ああああああああ】ここに新着情報ううううううう</p><br>
						<p>【ああああああああ】ここに新着情報ううううううう</p><br>
						<p>【ああああああああ】ここに新着情報ううううううう</p><br>

				</section>

			</article>

			<footer id = "footer">
				<p>Copyright &copy; 2006-2013 FutureScope. Corp. ALL Rights Reserved.</p>
			</footer>

		</article>
	</body>
</html>